@extends('master')
@section('style')
	<style>
		#content{margin-top: 50px;padding: 0px;padding-top: 20px;}
		#tools ul li{line-height: 20px;color: #666;border-radius: 5px;padding: 5px;font-size: 12px;}
		#tools ul li:hover{color: #259;background: rgba(225,225,225,.5);cursor: pointer;}
		#tools ul li span{padding: 5px;opacity: 0.5;}
		#flink span{display: inline-block;color: #999;}
		#flink span a{color: #999;}
		#content .col-md-8 .container-fluid .container{padding: 0px;}
		#content-ask{background: rgba(225,225,225,0.5);height: 50px;border-radius: 10px;}
		#content img{border-radius: 8px;}
		#content-ask ul li{color: #6c829f;margin-right: 1px solid #eee;padding: 15px;}
		#content-ask ul li:hover{cursor: pointer;color: #217ADE;}
		#content-ask ul li span{padding:0px 10px;}
		#item-datials{height: 250px;border-bottom: 1px solid #ddd;padding: 10px 0px;font-size: 12px;}
		#item-datials .col-md-1 .btn{background: #EFF6FA;height: 20px;padding: 0px 10px;margin-top: 10px;}
		#item-datials .col-md-1 .btn:hover{background: #ddd;}
		#item-datials .col-md-12{padding: 0px;}
		#item-datials .col-md-11 span,#item .col-md-11 h5{color: #999;}
		#item-datials .col-md-11 .col-md-12{cursor: pointer;}
		#item-datials #item-text{line-height: 25px;}
		#item{border-top: 1px solid #ddd;position: relative;}
		#item #topic{color: #999;font-size: 12px;line-height: 35px;text-align: right;}
	</style>
@endsection
@section('content')
	<div id="content" class="container">
		<!-- 左边主题内容 start -->
			<div class="col-md-8">
				<!-- 提示栏 start -->
					<div class="container-fluid">
						<div class="col-md-10"><span id="icon" class="glyphicon glyphicon-th-list"></span>编辑推荐</div>
					</div>
				<!-- 提示栏 end -->
				<div class="clearfix"><hr></div>
				<!-- 第一推荐位 start -->
				@foreach($articles as $k=>$v)
				<div id="ad_first" class="col-md-12">
					<h5><b><a href="/article/{{$v->id}}">{{$v->title}}</a></b></h5>
					<div class="col-md-1">
						<img width="40" src="{{$v->user->face}}" alt="">
					</div>
					<div class="col-md-11" style="padding-bottom: 10px;">
						<p class="col-md-12"><a href="/show/{{$v->user->id}}"><b>{{$v->user->name}}</b></a>
						<span id="icon" class="glyphicon glyphicon-fire" style="color: red;"></span>
						<span id="topic">{{$v->column->title}}</span></p>
						<div class="col-md-4">
							<img width="200" height="125" src="{{$v->images}}" alt="">
						</div>
						<div class="col-md-8" style="height: 120px;overflow: hidden;text-overflow: ellipsis;">
							<span>{!!$v->content!!}</span>
						</div>
					</div>
				</div>
				@endforeach
				<!-- 第一推荐位 end -->
				<div class="col-md-12 text-center">
					{!! $articles->render() !!}
				</div>
			</div>
		<!-- 左边主题内容 end -->
		<!-- 右边工具栏 start -->
		<div class="col-md-4">
			<div id="tools" class="container-fluid">
				<ul class="list-unstyled">
					<h5><b>热门圆桌</b></h5>
					<li><span><img src="holder.js/30x30?text=2&bg=#ddd" alt=""></span>好好开车-驾驶指南</li>
					<li><span><img src="holder.js/30x30?text=2&bg=#ddd" alt=""></span>基础护肤</li>
					<li><span><img src="holder.js/30x30?text=2&bg=#ddd" alt=""></span>人工智能-自动驾驶</li>
					<hr>
					<h5><b>热门话题</b></h5>
					<li><span><img src="holder.js/30x30?text=2&bg=#ddd" alt=""></span>好好开车-驾驶指南</li>
					<li><span><img src="holder.js/30x30?text=2&bg=#ddd" alt=""></span>基础护肤</li>
					<li><span><img src="holder.js/30x30?text=2&bg=#ddd" alt=""></span>人工智能-自动驾驶</li>
					<hr>
					<h5><b>热门收藏</b></h5>
					<li><a href="">好好开车-驾驶指南</a><br>321人关注-123条内容</li><hr>
					<li><a href="">基础护肤</a><br>321人关注-123条内容</li><hr>
					<li><a href="">人工智能-自动驾驶</a><br>321人关注-123条内容</li><hr>
					<hr>
					<li><span><img src="holder.js/30x30?text=3&bg=#ddd" alt=""></span>下载APP</li>
				</ul>
				<span id="flink" style="color: #999;">
					<span><a href="#">刘看山</a></span> |
					<span><a href="#">知乎指南</a></span> |
					<span><a href="#">建议反馈</a></span> |
					<span><a href="#">移动应用</a></span> |
					<span><a href="#">加入知乎</a></span> |
					<span><a href="#">知乎协议</a></span> |
					<span><a href="#">举报投诉</a></span> |
					<span><a href="#">联系我们</a></span>
				</span><br>
				<span style="color: #999;">© 2017 知乎</span>
			</div>
		</div>
		<!-- 右边工具栏 start -->
	</div>
@endsection